<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :inline="true" :model="queryParams" label-width="105px">
        <el-form-item label="结账起始时间" prop="beginTime">
          <el-date-picker v-model="queryParams.beginTime" placeholder="结账起始时间"
                          type="datetime" value-format="YYYY-MM-DD HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结账截止时间" prop="endTime">
          <el-date-picker v-model="queryParams.endTime" placeholder="结账截止时间"
                          type="datetime" value-format="YYYY-MM-DD HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结账号" prop="acctNo">
          <el-input v-model="queryParams.acctNo" clearable placeholder="请输入结账号"
                    @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <div class="mr10" style="float: right">
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </div>
      </el-form>
    </div>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-table v-adaptive="255" :border="true" :data="inpAcctMasterList"
                  :header-cell-style="$headerCellStyle"
                  :stripe="true" :summary-method="getSummaries"
                  highlight-current-row show-summary @row-click="acctMasterRowClick">
          <el-table-column :align="'center'" label="结账号">
            <template #default="scope">
              {{ scope.row.acctNo }}
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="结账人">
            <template #default="scope">
              {{ scope.row.acctUserName }}
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="收据张数">
            <template #default="scope">
                            <span
                              class="ys-css">{{ scope.row.feesNum }}张</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="退费收据张数">
            <template #default="scope">
                            <span
                              class="ys-css">{{ scope.row.refundNum }}张</span>

            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="总金额" prop="sumAmount">
            <template #default="scope">
                                    <span
                                      class="ys-css">{{ parseFloat(scope.row.sumAmount).toFixed(2) }} 元</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="退费金额" prop="refundAmount">
            <template #default="scope">
                                    <span
                                      class="ret-ys-css">{{ parseFloat(scope.row.refundAmount).toFixed(2) }} 元</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="实收金额" prop="chargesAmount">
            <template #default="scope">
                                    <span
                                      class="ys-css">{{ parseFloat(scope.row.chargesAmount).toFixed(2) }} 元</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="结账开始时间" width="160">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.acctStartTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="结账结束时间" width="160">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.acctEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="结账类型">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['acct_type']" :value="scope.row.acctType"/>
            </template>
          </el-table-column>
          <!--                    <el-table-column :align="'center'" label="是否合并结" width="80">-->
          <!--                        <template #default="scope">-->
          <!--                            <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.isMerge"/>-->
          <!--                        </template>-->
          <!--                    </el-table-column>-->
          <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="70">
            <template #default="scope">
              <el-tooltip class="item" content="打印" effect="dark" placement="top">
                <el-button circle type="primary" @click="print()">
                  <template #icon>
                    <i-ep-printer/>
                  </template>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </el-col>
      <el-col :span="8">
        <div style="height: 50%;">
          <el-table :border="true" :data="inpAcctMoneyList" height="100%"
                    :header-cell-style="$headerCellStyle"
                    :stripe="true" :summary-method="getSummaries"
                    highlight-current-row show-summary>
            <el-table-column :align="'center'" label="支付金额类型" prop="moneyTypeName"/>
            <el-table-column align="center" label="收费">
              <el-table-column :align="'center'" label="结账号">
                <template #default="scope">
                                    <span
                                      class="ys-css">{{ scope.row.acctNo }}</span>
                </template>
              </el-table-column>
              <el-table-column :align="'center'" label="金额" prop="charges">
                <template #default="scope">
                                    <span
                                      class="ys-css">{{ parseFloat(scope.row.charges).toFixed(2) }} 元</span>
                </template>
              </el-table-column>
              <el-table-column :align="'center'" label="退费金额" prop="refundAmount">
                <template #default="scope">
                                    <span
                                      class="ret-ys-css">{{ parseFloat(scope.row.refundAmount).toFixed(2) }} 元</span>
                </template>
              </el-table-column>
              <el-table-column :align="'center'" label="合计金额" prop="totalReceived">
                <template #default="scope">
                                    <span
                                      class="ys-css">{{
                                        parseFloat(scope.row.totalReceived).toFixed(2)
                                      }} 元</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 50%;">
          <el-table :border="true" :data="inpAcctDetailList" height="100%"
                    :header-cell-style="$headerCellStyle"
                    :stripe="true" :summary-method="getSummaries"
                    highlight-current-row show-summary>
            <el-table-column :align="'center'" label="会计科目" prop="subjCodeName"/>
            <el-table-column align="center" label="收费">
              <el-table-column :align="'center'" label="结账号">
                <template #default="scope">
                                    <span
                                      class="ys-css">{{ scope.row.acctNo }}</span>
                </template>
              </el-table-column>
              <el-table-column :align="'center'" label="费用" prop="costs">
                <template #default="scope">
                                    <span
                                      class="ys-css">{{ parseFloat(scope.row.costs).toFixed(2) }} 元</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {getAcctDetailAndMoney, selectPageInpAcctMaster} from "@/api/inpAcct/inpAcctMaster.ts";
import {useUserStoreHook} from "@/store/modules/user";
import {useDictStoreHook} from "@/store/modules/dict";

const {proxy} = getCurrentInstance() as any;
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('acct_type', 'sys_yes_no', 'pay_way_dict', 'tally_subject_dict'))
const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const inpAcctMasterList = ref<any>([])
const inpAcctMoneyList = ref<any>([])
const inpAcctDetailList = ref<any>([])
const queryParams = ref<any>({
  orgId: userInfo.orgId,
  pageNum: 1,
  pageSize: 10,
  acctUserId: userInfo.userId
})
const total = ref(0);
const dateRange = ref<any>([])
const emits = defineEmits(["getList"])

function handleQuery() {
  dateRange.value = [queryParams.value.beginTime, queryParams.value.endTime];
  getList()
}

function resetQuery() {
  queryParams.value.beginTime = undefined
  queryParams.value.endTime = undefined
  queryParams.value.acctNo = undefined
  getList()
}

/** 查询门诊结账记录主列表 */
function getList() {
  const query = {
    orgId: queryParams.value.orgId,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    acctUserId: queryParams.value.acctUserId,
    acctNo: queryParams.value.acctNo,
  }
  selectPageInpAcctMaster(proxy.$addDateRange(query, dateRange.value)).then((response: any) => {
    inpAcctMoneyList.value = []
    inpAcctMoneyList.value = []
    inpAcctMasterList.value = response.rows;
    total.value = response.total;
  });
}

/**
 * 结账主表行点击事件
 */
function acctMasterRowClick(row) {
  getAcctDetailAndMoney({inpAcctMasterId: row.inpAcctMasterId}).then((res: resType) => {
    if (res.data) {
      inpAcctMoneyList.value = res.data.inpAcctMoneyList
      inpAcctMoneyList.value.forEach((item: any) => {
        item.totalReceived = Number(item.charges) + Number(item.refundAmount)
      })
      inpAcctDetailList.value = res.data.inpAcctDetailList
    }
  })
}

const getSummaries = (param: any) => {
  const {columns, data} = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 3) {
      // sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
      sums[index] = h('div', {style: {'float': 'right', 'color': 'rgb(51, 91, 249)', 'font-size': '15px'}}, [
        '合计：',
      ])
      return
    }
    if (index === 4 || index === 5 || index === 6) {
      const values = data.map((item) => Number(item[column.property]))
      if (!values.every((value) => Number.isNaN(value))) {
        sums[index] = `￥ ${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return (Number(prev) + Number(curr)).toFixed(2)
          } else {
            return (Number(prev)).toFixed(2)
          }
        }, 0)} 元`
      } else {
        sums[index] = 'N/A'
      }
    }
  })

  return sums
}

getList()

defineExpose({
  getList
})
</script>


<style scoped>

</style>
